<template>
  <div>
    <div class="work_tips">
      <span style="font-weight: 600; font-size: 20px">{{title}}</span>
      <span style="font-weight: 300; font-size: 12px">
        {{Data.DateRange[0]}}  - {{Data.DateRange[1]}} </span
      >
    </div>

    <div class="workload">
      <div class="workloadNum">
        <div class="work-title">任务工作量（个）</div>
        <div class="work-content">
          <span class="work-Num"> {{Data.StatisticsData.NowWeekData.WeekCount}} </span>
          <span class="work-old">
            比前一周期 <br />
            {{Data.StatisticsData.Weekrate}}</span
          >
        </div>
      </div>
      <div class="workloadNum">
        <div class="work-title">专注时长（h）</div>
        <div class="work-content">
          <span class="work-Num"> {{Data.StatisticsData.NowWeekData.WorkTimeCount}}h </span>
          <span class="work-old">
            比前一周期 <br />
            {{Data.StatisticsData.WorkTimerate}}</span
          >
        </div>
      </div>
    </div>

    <!-- 事项简介 -->
    <div class="work_tips">
      <span style="font-weight: 400; font-size: 20px"
        ><SmileTwoTone /> 本周达成了 {{Data.StatisticsData.NowWeekData.ComWorkCount}} 个任务，任务工作量 {{Data.StatisticsData.NowWeekData.WeekCount}} 个</span
      >
      <span style="font-weight: 300; font-size: 12px"
        >高于上周期的平均水平（{{Data.StatisticsData.Comworkrate}}）</span
      >
    </div>

    <!-- 事项工作量折线图 -->
    <div class="cat">
      <div class="category-header">任务工作量趋势（个）</div>
      <div id="category"></div>
      <div class="category-foot">
        趋势向好，你把生活过的越来越美妙，加油吧！
      </div>
    </div>

    <!-- 打卡连续天数 -->
    <div class="work_tips" style="height: 100px">
      <span style="font-weight: 600; font-size: 28px"> {{Data.StatisticsData.ContinuousDay}} </span>
      <span style="font-weight: 300; font-size: 12px">
        完成任务天数 {{Data.StatisticsData.ContinuousDay}} 天！<br />
        不能回头，那就走得更远吧。</span
      >
    </div>

    <!-- 番茄钟简介 -->
    <div class="work_tips">
      <span style="font-weight: 400; font-size: 20px"
        ><SmileTwoTone /> 本周收获了 {{Data.StatisticsData.NowWeekData.NowTimeCount}} 个番茄，平均专注时长 {{Data.StatisticsData.TimeAverage}} h</span
      >
      <span style="font-weight: 300; font-size: 12px">
        高于上周的平均水平（{{Data.StatisticsData.TimeAveragerate}}）
      </span>
    </div>

    <!-- 番茄时间量折线图 -->
    <div class="cat">
      <div class="category-header">番茄专注时长（小时）</div>
      <div id="category2"></div>
      <div class="category-foot">
        心无旁骛的专注，让你的效率翻倍，这种专注的快感会让你沉醉其中。
      </div>
    </div>

    <!-- 番茄专注饼状图 -->
    <div class="cat" style="margin-top:14px">
      <div class="category-header">专注时长分布（小时）</div>
      <div id="category3"></div>
      <div class="category-foot">
        当你经历一些事情的时候，眼前的风景已经和从前不一样了。
      </div>
    </div>

    <!-- 数据总结语 -->
    <div class="work_tips" style="height: 100px">
      <span style="font-weight: 300; font-size: 14px;margin-top:16px"
        ><SmileTwoTone /> 这是一套强大模块化数据分析体系。<br/>随着你使用，它会变得越来越丰富智能。<br/>从指定日程计划，到执行，再到复盘回顾全方位助力你的成长！</span
      >
    </div>
  </div>
</template>


<script>
import { SmileTwoTone } from "@ant-design/icons-vue";
import { defineComponent, onMounted,toRefs,onBeforeUnmount } from "vue";
import * as echarts from "echarts";
export default defineComponent({
  props:{
    title:String,
    Data:Object,
  },
  components: {
    SmileTwoTone,
  },
  setup(props) {
    const { title,Data, } = toRefs(props)

    onMounted(() => {
      let chartDom = document.getElementById("category");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: "category",
          data: Data.value.reglabel,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: Data.value.StatisticsData.regWork,
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);

      //   柱状图
      let chartDom2 = document.getElementById("category2");
      let myChart2 = echarts.init(chartDom2);
      let option2;

      option2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: Data.value.reglabel,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "专注时长",
            type: "bar",
            barWidth: "60%",
            data: Data.value.StatisticsData.regTime,
          },
        ],
      };

      option2 && myChart2.setOption(option2);

      let chartDom3 = document.getElementById("category3");
      let myChart3 = echarts.init(chartDom3);
      let option3;

      option3 = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "事项专注时长",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: Data.value.StatisticsData.regMatter
          },
        ],
      };

      option3 && myChart3.setOption(option3);
    });
  },
});
</script>


<style lang="less" scoped>
.workload {
  height: 120px;
  margin: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .workloadNum {
    // border: 1px solid gold;
    width: 48%;
    text-align: left;
    padding: 12px;
    /* 设置阴影 */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    /* 设置card的背景色 */
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .work-title {
      font-weight: 500;
      font-size: 16px;
    }
    .work-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .work-Num {
        font-weight: 600;
        font-size: 28px;
      }
      .work-old {
        margin-left: 8px;
        font-weight: 100;
        font-size: 12px;
      }
    }
  }
}

.work_tips {
  height: 60px;
  margin: 14px 20px;
  /* 设置阴影 */
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  /* 设置card的背景色 */
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cat {
  margin: 0 20px;
  /* 设置阴影 */
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  /* 设置card的背景色 */
  background: #ffffff;
  .category-header {
    height: 30px;
    line-height: 30px;
    padding-top: 20px;
    padding-left: 50px;
    font-weight: 600;
    text-align: left;
  }
  .category-foot {
    text-align: left;
    padding-left: 50px;
    padding-bottom: 20px;
  }
  #category {
    height: 400px;
  }
  #category2 {
    height: 400px;
  }
  #category3 {
    height: 400px;
  }
}
</style>